<template>
    <div class="select_container_nw" @mouseenter="editVisible = true" @mouseleave.stop="editVisible = false">
        <div class="select_main" :class="{select_showlist:slshow}">
            <template>
                <span class="select_content" v-show="showPlaceholder">{{placeholder}}</span>
                <span class="select_content" :style="{background: selectColors[colorIndex]}" v-show="!showPlaceholder">{{label}}</span>
            </template>
            <span v-if="editor" v-show="editVisible && !slshow" class="select_arrow_after " @click.stop="sllistshow" :class="{cast_rotate:slshow}" style="margin-top: 1px;"></span>
        </div>
        
        <div class="select_list" v-show="slshow" :style="select_list_style">
            <div class="select_list_body">
                <div :style="{position:'relative'}">
                    <ul class="select_list_ul" v-if="opintdata.length > 0">
                        <li v-for="(item,index) in opintdata" :key="index" @click.stop="itemClick(item,index)" :class="{current:focusIndex==index}">
                            <span class="select_item" :style="{background: selectColors[index]}">{{item[defaultExpandedKeys.label]}}</span>
                        </li>
                    </ul>
                    <ul class="select_Nolist_ul" v-else>
                        <li>无数据</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import { 
  updateRow
} from "@/api/worksheet";
import {selectColors} from "@/constant"
export default {
    name: "selectlist",
    props: {
        opintdata: {
            //默认select数据
            type: Array,
            default() {
                return [];
            }
        },
        value: {
            //v-model值
            type: [String, Number, Array],
            default: ""
        },
        placeholder: {
            //初始显示的内容
            type: String,
            default: "请选择"
        },
        disabled: {//是否禁用当前组件
            type: Boolean,
            default: false
        },
        newlabel:{
            type: String,
            default: "请选择"
        },
        defaultExpandedKeys: {//初始绑定的键值
            type: [Array, Object],
            default() {
                return {
                    label: 'label',
                    value: 'value',
                };
            }
        },
        rowId: String,
        fieldName: String,
        editor: {
          default: true
        },
    },
    data() {
        return {
            colorIndex: 0,
            slshow: false,
            select_list_style: "top: 100%",
            editVisible: false,
            focusIndex: -1,
            model: this.value,
            showPlaceholder: true,
            label: "",
            isshowalldata: true,
            selectColors,
        };
    },
    created() {
        this.opintchang();
    },
    mounted() {
        document.addEventListener('click', (e) => {
            if (!this.$el.contains(e.target)) this.slshow = false;
        })
    },
    computed:{
        worksheetId() {
            return this.$route.params.worksheetId;
        }
    },
    watch: {
        value(val) {
            this.model = val;
            this.opintchang();
        },
        opintdata(val) {
            this.label = this.placeholder;
            this.opintchang();
        },
        newlabel(val){
            this.label=val;
        }
    },
    methods: {
        alldata() {

        },
        strtransition(str) {
            //处理处进来的长度
            if (parseInt(str) != NaN) {
                return parseInt(str);
            } else {
                return 115;
            }
        },
        sllistshow(e) {
            //控制list显示不显示
            this.isshowalldata = true;
            this.slshow = !this.slshow;
            let height = this.opintdata.length > 4 ? 140 : 35 * this.opintdata.length
            if(e.clientY + height > window.innerHeight - 42){
              this.select_list_style = `top:${-height}px`
            }else{
              this.select_list_style = `top: 100%`
            }
            // console.log(e.clientY);
            // console.log(this.opintdata.length);
            // console.log(window.innerHeight);
        },
        async itemClick(item, index){
            if(!this.editor)return
            this.slchang(item, index)
            await updateRow({worksheetId: this.worksheetId, data: {[this.fieldName]: item[this.defaultExpandedKeys.value]}, rowId: this.rowId})
        },
        slchang(item, index, isnotchange = true) {
            //list点击事件
            this.model = item[this.defaultExpandedKeys.label];
            this.label = item[this.defaultExpandedKeys.label];
            this.colorIndex = index;
            this.slshow = false;
            this.focusIndex = index;
            this.showPlaceholder = false;
            this.$emit("input", item[this.defaultExpandedKeys.value]); //触发 input 事件，并传入新值
            this.$emit("change", item, index);
        },
        handleClose() {
            //关闭list列表
            this.slshow = false;
        },
        opintchang() {
            if (typeof this.opintdata == "object") {
                let pi = this.opintdata.filter(item => {
                    if (this.value == item[this.defaultExpandedKeys.value]) {
                        return item;
                    }
                })
                let index = 0;
                let item = {};
                if (pi.length > 0) {
                    index = this.opintdata.findIndex(item => {
                        if (this.value == item[this.defaultExpandedKeys.value]) {
                            return item;
                        }
                    })
                    item = pi[0];
                }
                if (this.opintdata.length > 0) {
                    this.slchang(item, index, false);
                    this.showPlaceholder = false;
                }
            }
        }
    }
}
</script>

<style lang="less" type="text/css" scoped>
@slbordercolor: #dfe4ed;
@fontcolor: #606266;


.appPage .tenant-table{
  .table-select{
    width: 100%;

    .ant-select-selection{
      border: none;
      background-color: transparent;

      .ant-select-selection-selected-value{
        // margin: 0 4px 4px 0;
        padding: 0 12px;
        background-color: rgb(33, 150, 243);
        border-radius: 40px;
        color: rgb(255, 255, 255);

      }
    }
  }
}

.disabled {
  pointer-events: none;
  cursor: default;
  filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
  -moz-opacity: 0.5; /*Firefox私有，透明度50%*/
  opacity: 0.5; /*其他，透明度50%*/
}

.select_container_nw {
  position: relative;
  font-size: 13px;
  letter-spacing: 1px;
}

.select_main {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.select_main:hover {
  border-color: #409eff;
}

.select_circle {
  position: absolute;
  width: 16px;
  border-radius: 50%;
  height: 16px;
  right: 6px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  background-color: #ecf6fe;
}

.select_showlist {
    border: 2px solid #0f8df2;
    background-color: white;
}

.select_content {
  background-color: rgb(33, 150, 243);
  border-radius: 40px;
  font-size: 12px;
  color: #000;
  padding: 0px 12px;
  // margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}

.select_content::after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  border-radius: 0 2px 2px 0;
}

.select_input {
  padding-left: 10px;
  padding-right: 32px;
  font-size: 13px;
  overflow: hidden;
  outline: none;
  height: 25px;
  border: none;
  border-bottom: 1px solid @slbordercolor;
  z-index: 1;
}

.search_svg {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 2;
}

.select_arrow,
.select_arrow_after {
  content: " ";
  position: absolute;
  right: 9px;
  top: 42%;
  border: 5px solid transparent;
  border-top: 5px solid @fontcolor;
  z-index: 1;
  -webkit-transform-origin: 50% 20%;
  -moz-transform-origin: 50% 20%;
  -ms-transform-origin: 50% 20%;
  transform-origin: 50% 20%;
  transition: all 150ms ease-in-out;
  cursor: pointer;
}
.select_arrow:hover,
.select_arrow_after:hover{
  border: 5px solid transparent;
  border-top: 5px solid #0f8df2;
}
.select_arrow_after {
  cursor: pointer;
  margin-top: -1px;
}

.select_list {
  position: absolute;
  // left: 0px;
  // top: 100%;
  width: 100%;
  border: 1px solid @slbordercolor;
  // margin: 2px 0 0 0;
  overflow: hidden;
  transform-origin: center top 0px;
  border-radius: 2px;
  background-color: #fff;
  outline: none;
  z-index: 2020;
}

.select_list > .select_list_body ul {
  list-style: none;
  box-sizing: border-box;
  position: relative;
  display: block;
}

.select_list > .select_list_body ul li {
  font-size: 14px;
  padding: 5px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: black;
  height: 35px;
  line-height: 25px;
  font-size: 12px;
  box-sizing: border-box;
}

.select_list_ul li {
  cursor: pointer;

  .select_item{
      display: inline-block;
      background-color: rgb(33, 150, 243);
      height: 25px;
      border-radius: 40px;
      padding: 0px 12px;
  }
}

.select_list_ul li:hover {
  background-color: #f5f7fa;
  color: @fontcolor;
}

.current {
  background-color: #e8f0fd !important;
  color: #409eff !important;
}

.cast_rotate {
  transform-origin: 50% 20%;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.select_list_body {
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.list_current {
  display: none;
}
.searchinput {
  border: none;
  width: 74%;
  height: 93%;
  outline: none;
  text-align: center;
  margin: 0 0 0 7px;
  &:focus {
    border: none;
  }
}
.no_result {
  display: none;
  text-align: center;
  color: @slbordercolor;
}

.list_open {
  display: block;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style> 